<template>
  <div>
    <detail-header :title="'影推'"></detail-header>
    <detail-movie :movieData="movieObj"></detail-movie>
    <detail-description :desc="movieObj.description"/>
    <detail-comment :list="list"/>
    <detail-bottom :stared="stared" @newComment="addNewComment" @userbox="toggleUserBox" @star="handleStar"/>
    <user :show="show" @userbox="toggleUserBox"></user>
  </div>
</template>
<script>
import DetailHeader from 'common/header/Header'
import DetailMovie from './components/Movie'
import DetailDescription from './components/Description'
import DetailComment from './components/Comment'
import DetailBottom from './components/Bottom'
import User from 'common/user/User'
import axios from 'axios'
import qs from 'qs'
import { Toast } from 'mint-ui'
export default {
  name: 'Detail',
  components: {
    DetailHeader,
    DetailMovie,
    DetailDescription,
    DetailComment,
    DetailBottom,
    User
  },
  data () {
    return {
      show: false,
      movieObj: {},
      stared: 0,
      list: {}
    }
  },
  methods: {
    getDetailInfo () {
      axios.get('/api/movieInfo/' + this.$route.params.id).then(this.getDataSucc)
    },
    getDataSucc (res) {
      res = res.data
      this.movieObj = res.data
      this.stared = res.data.stared
    },
    getCommentInfo () {
      axios.get('/api/getComment/' + this.$route.params.id).then(this.getCommentSucc)
    },
    getCommentSucc (res) {
      res = res.data
      this.list = res.data.commentList
    },
    addCommentSucc (txt) {
      const newComment = {
        nickname: this.$store.state.nickname,
        head_pic: this.$store.state.avatar,
        content: txt
      }
      let count = Object.keys(this.list).length
      this.$set(this.list, String(count), newComment)
      Toast({
        message: '评论成功',
        position: 'bottom',
        duration: 2000
      })
    },
    addCommentCheck (res) {
      res = res.data
      if (res.code === -1) {
        Toast({
          message: '长度超出限制（300个字符内）',
          position: 'bottom',
          duration: 2000
        })
        return
      }
      this.addCommentSucc(res.data.comment)
    },
    addNewComment (newCommentText) {
      axios.post('/api/postUpComment', qs.stringify({
        movie_id: this.$route.params.id,
        commentContent: newCommentText
      })).then(this.addCommentCheck)
    },
    toggleUserBox () {
      this.show = !this.show
    },
    addStar () {
      axios.post('/api/usr/addLove/' + this.$route.params.id).then(function () {
        Toast({
          message: '收藏成功',
          position: 'bottom',
          duration: 2000
        })
      })
    },
    deleteStar () {
      axios.post('/api/usr/deleteMyLove/' + this.$route.params.id).then(function () {
        Toast({
          message: '取消收藏成功',
          position: 'bottom',
          duration: 2000
        })
      })
    },
    handleStar () {
      if (!this.stared) this.addStar()
      else this.deleteStar()
      this.stared = this.stared === 0 ? 1 : 0
    }
  },
  mounted () {
    this.getDetailInfo()
    this.getCommentInfo()
  }
}
</script>
<style lang="stylus" scoped>

</style>
